<template>
    <el-row>
        <el-date-picker
                v-model="val"
                v-if="fieldData.fieldType==='date'"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 100%"
                :disabled="db"
        >
        </el-date-picker>
        <el-input
                v-else-if="fieldData.fieldType==='textarea'"
                type="textarea"
                maxlength="200"
                show-word-limit
                v-filterSpecialChar
                :rows="4"
                :placeholder="'请输入内容'+fieldData.fieldName"
                v-model="val"
                :disabled="db"
        >
        </el-input>
        <el-select   v-model="val" :placeholder="'请选择'+fieldData.fieldName"   v-else-if="fieldData.fieldType==='select'" :disabled="db" style="width: 100%">
            <el-option v-for="(item,i) in fieldData.fieldValue" :key="item.id" :label="item.label"
                       :value="item.id">

            </el-option>
        </el-select>
        <TreeSelect
                :disabled="db"
                v-else-if="fieldData.fieldType==='select-tree'"
                v-model="val"
                :tree-list="fieldData.fieldValue"
                style="width: 100%">

        </TreeSelect>
        <UploadInput
                :disabled="db"
                v-else-if="fieldData.fieldType==='file'"
                v-model="val"
                :name="fieldData.field"
                @changeFile="setFile">

        </UploadInput>
        <el-input
                :disabled="db"
                v-else
                v-model="val"
                :placeholder="'请输入内容'+fieldData.fieldName"
                v-filterSpecialChar
                autocomplete="off"
        ></el-input>
    </el-row>
</template>

<script>
import UploadInput from '@/common/UploadInput'
import TreeSelect from '@/common/TreeSelect'
export default {
  name: 'template-field',
  components: {
    TreeSelect, UploadInput
  },
  data() {
    return {
      db: !this.disabled,
      val: this.value,
      label: this.label,
      field: this.fieldData
    }
  },
  model: {
    prop: 'value',
    event: 'handlerValueChange'
  },
  props: {
    disabled: {
    },
    value: {

    },
    fieldData: {
      type: Object,
      default() {
        return {
          fieldName: '',
          field: '',
          fieldType: '',
          fieldValue: null,
        };
      },
    }
  },
  watch: {
    val: {
      handler(val) {
        this.val = val;
        this.$emit('handlerValueChange', this.val);
      },
      immediate: true,
      deep: true
    },
    disabled: {
      handler(val) {
        this.db = !val;
      },
      deep: true
    },
    value: {
      handler(val) {
        this.val = val;
      },
      deep: true
    },
    fieldData: {
      handler(nv, o) {
        if (nv && nv.fieldValue) {
          if ((typeof nv.fieldValue)==='string') {
            nv.fieldValue = JSON.parse(nv.fieldValue);
          }
        }
        this.fieldData = nv;
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    showSize() {
      return this.size;
    }
  },
  methods: {
    setFile(file) {
      this.$emit('changeFile', file, field);
    },
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  created() {
  }
}
</script>

<style scoped>

</style>
